<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--李缘龙-->
<link rel="stylesheet" href="public/css/lyl-text.css" />
<style type="text/css">
.fs3 {
    border: 1px #DDD solid;
    border-radius: 5px;
    padding: 10px;
    margin-top: 15px;
    height: 130%;
}
.fs3 legend {
    background-image: url(public/images/charts.png);
    font-weight: bold;
}
.fs3 legend {
    margin-left: 0px;
    font-size: 14px;
    background-repeat: no-repeat;
    background-position-y: center;
    padding-left: 25px;
}
.fs3 h1 {
    font-size: 14px;
    padding: 5px;
    margin-bottom: 8px;
    margin-top: 8px;
}
.fs3 .line {
    border-bottom: 1px #EEE solid;
    margin: 5px 0px;
}

.fs3 h6 {
    font-size: 12px;
    font-weight: normal;
    margin: 8px 0px;
    padding: 0px;
}
.fs3 div {
    margin-left: 10px;
}
.chart_text {
    font-size: 30px;
    font-weight: bold;
    color: red;
}
</style>
</head>
<body class="fatherdiv">
<div class="nav">
					您好! 
					<a href="" class="">${userinfo.studentName}</a> 
					部门： <a>${classEntity.className}</a>
					 部门经理： <a>${monitor.studentName}</a> 
					 学分：
					<a href="javascript:loadXxx('stu/myscore.jsp')">[${userinfo.totalCredits}分]</a> 
					<a target="" class="" href="">[查看课表]</a> 
					<a id="qiantaipass" class="" href="qt-user-updatepass">[修改密码]</a> 
					<a class="" href="logout" onclick="return confirm('确定退出？')">[注销]</a>
	</div>
	<ul class="nav_head">
		<li>
			<div>
				<img src="public/images/xuexi.png" /> <a href="qiantai">快乐学习</a>
			</div>
		</li>
		<li>
			<div>
				<img src="public/images/quxian.png" /> <a href="qt-assessment">学习评估</a>
			</div>
		</li>
			<!-- <li>
			<div>
				<img src="public/images/rongyu.png" /> <a href="qt-my-honor">我的荣誉</a>
			</div>
		</li> 
		<li>
			<div>
				<img src="public/images/rizhi.png" /> <a
					href="qt-journal-recommend">教学日志</a>
			</div>
		</li>-->
		<li>
			<div>
				<img src="public/images/jihua.png" /> <a
					href="qt-learnplan-publish">学习计划</a>
			</div>
		</li>
		<li>
			<div>
				<img src="public/images/tuadui.png" /> <a href="qt-project-team">项目团队</a>
			</div>
		</li>
		<li>
			<div>
				<img src="public/images/jiuye.png" /> <a href="chaxuijingyan?id=-1">就业资讯</a>
			</div>
		</li>
	</ul>
	<!--头部上-->
	<div class="left">
		<div class="honor_wall_div" style="height: 300px;">
			<fieldset class="fs3">
		 		<legend>成绩评估</legend>
		 		<div class="div_normal3">
	 			<h1>您进入中科韬睿以来，共获得了<span class="chart_text">${count }</span>次成绩，
	 			我们按分数为您划分了等级，90-100为优，80-90为良，70-80为中，
	 			60-70为差，60分以下为不及格 </h1>
	 			
		 			<h6 class="line"></h6>
		 			<div class="appraise">
			 				在我们看来， 您已经非常优秀了，只要您继续持之以恒，不断进取，相信一定可以赢取一个美好的未来……
				 	</div>
				 	<br/>
	 		</div>
				<div class="div_normal3" style="height: 100%;" >
					<div id="container"
						style="height: 60%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;"
						_echarts_instance_="ec_1510900769369">
						<div class="assessment_div">
							<canvas class="canvas_cs" width="1120" height="886" data-zr-dom-id="zr_0"> </canvas>
						</div>
					</div>
				</div>
			</fieldset>
		</div>
	</div>
	<!-- ==========上左下右==========  -->
	<div class="right">

		<div class="honor_wall_div">
			<div class="examination_top">
				<div class="examination_left"></div>
				<div class="examination_middle">考试/作业</div>
				<div class="examination_right"></div>
			</div>

			<ul>
					<c:if test="${empty maps }">
						<h1>最近还没有练习哦</h1>
					</c:if>
					<c:if test="${maps!=null }">
						<c:forEach items="${maps }" var="maps" varStatus="state">
						   <li style="float: left; width: 100%;">
							    <span style="float: left;cursor: pointer;"> <img src="public/images/level.png" />
									<a  href="qt-assignment_details?studentId=${maps.studentinfo_id }&zuoyeId=${maps.zuoye_id}" style="vertical-align: top;">${maps.zuoye_name }</a>
								</span>
								<span style="float: right;margin-right: 10px;">${maps.sumCount==null?'未批改':maps.sumCount }
								</span>
							</li>
						</c:forEach>
					</c:if>
				</ul>
		</div>
	</div>
	<!--底部下-->
	<div class="home_page_bottom" style="margin-top: 110px;">
		<div class="botton_left">
			<img style="height: 50px; margin-left: 10px;"
				src="public/images/downloadlog.png" />
		</div>
		<div class="botton_right">
			<div>
				©2017 <a style="color: gray;">中科韬睿</a> 版权所有 版本 Ver 1.1.8
			</div>
			<div>研发部技术总监 李赞红 郭华</div>
			<div>电话 18573308384 18673363711</div>
		</div>
	</div>
	<!--导航图-->
	<script type="text/javascript" src="public/js/echarts-all-3.js"></script>
	<script type="text/javascript">
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var className=${className};
	var list1=${list1 }
	var list2=${list2 }
	var list3=${list3 }
	var list4=${list4 }
	var list5=${list5 }
	var array=[];
	  array[0]=list1;
	  array[1]=list2;
	  array[2]=list3;
	  array[3]=list4;
	  array[4]=list5;
	var app = {};
	option = null;
	option = {
		title: {
		//	text: '成绩评估统计图',
			subtext: className
		},
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: ['分数', '分数']
		},
		toolbox: {
			show: true,
			feature: {
				dataView: {
					show: true,
					readOnly: false
				},
				magicType: {
					show: true,
					type: ['line', 'bar']
				},
				restore: {
					show: true
				},
				saveAsImage: {
					show: true
				}
			}
		},
		calculable: true,
		xAxis: [{
			type: 'category',
			data: ['优', '良', '中', '差', '不及格'],
		boundaryGap : 20,//柱形图是否在Y轴居中
		barGap:'50%',
		axisLabel:{
            //X轴刻度配置
            interval:'auto', //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
    		rotate:-90
		 },
		}],
		yAxis: [{
			type: 'value'
		}],
		series: [{
			barCategoryGap : 20,//这是柱形图的宽度越小宽度越大
			name: '分数',
			type: 'bar',
			data: array,
			markPoint: {
				data: [{
						type: 'max',
						name: '最大值'
					},
					{
						type: 'min',
						name: '最小值'
					}
				]
			},
			markLine: {
				data: [{
					type: 'average',
					name: '平均值'
				}]
			}
		}, ]
	};;
	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
	</script>
</body>
</html>